<template>
    <div class="remark">
        <div class="remark-title bt bb">备注(最多添加3条)</div>
        <div class="remark-list clear" v-show="remarkList.length > 0">
            <!--<v-touch class="remark-item clear relative" v-for="(remarks, index) in remarkList" v-if="remarks.index" @tap="reset(remarks.index)" @swipeleft="onSwipeLeft(index)">
                <div class="remark-index fl tc"><span>{{remarks.index}}</span></div>
                <div class="remark-item-body relative">
                        {{remarks.remark}}
                        <div class="remark-delete tc">删除</div>
                </div>
                <div class="remark-item-line bb" v-show="remarkList.length - remarks.index > 0"></div>
            </v-touch>-->
            <remark-item v-for="(remarkItem, index) in remarkList" :key="remarkItem.id" :resetRemark="resetRemark"
                         :hideDelete="hideDelete" :showDelete="showDelete"
                         :cut="deleteRemark" :remarkId="remarkItem.id" :target="target" :remarkIndex="index + 1">
                {{remarkItem.remark}}
            </remark-item>
        </div>
        <div class="add-remark bb bt" v-if="remarkList.length != 3" @click="addRemark">
            <span class="icon btn-icon"><img src="../../assets/image/2B4BE0E4-C347-4FE6-A615-8608EC928A2F@1x.png" alt=""></span>
            <span class="btn-des">添加备注</span>
        </div>
        <div class="modal" v-show="modalShow"></div>
        <div class="modal-panel bt bb br bl" v-show="modalShow">
            <h2 class="modal-header">备注</h2>
            <div class="modal-body clearfix">
                <textarea class="modal-textarea bb bt br bl" placeholder="请写下你的备注" v-model="modalInput"></textarea>
                <div class="word-limit">
                    <span class="word-count">0</span> /
                    <span class="limit-count">50</span>
                </div>
            </div>
            <div class="modal-footer">
                <span class="modal-cancle modal-btn br" @click="modalCancel">取消</span>
                <span class="modal-ok modal-btn" @click="setRemark">确定</span>
            </div>
        </div>
    </div>
</template>
<script>
    import RemarkItem from './remarkItem.vue';
export default{
    name: 'remark',
    props: {
        showDelete: Boolean,
        hideDelete: Function
    },
    data(){
        return {
            remarkList: [],
            modalInput: '',//弹框输入内容
            modalShow: false,//弹框是否显示
            userId: '11212',
            isReset: false,//修改添加的判断
            which: -1, //点击的索引
        }
    },
    components: {
        RemarkItem
    },
    created(){
        this.getUserRemarks();
    },
    methods: {
        getUserRemarks(){
            this.$http.get('/mobile/userRemarks/listUserRemarks?userId=' + this.userId).then(function (res) {
                res = res.body;
                if(res.code === 0){
                    res = res.result;
                    this.remarkList = res;
                }else{
                    console.log('错误码: ' + res.code + ' : ' + res.message);
                }
            }, function (err) {
                console.log(err)
            })
        },
        target(id){
            this.which = id;
        },
        deleteRemark(remarkId){
            this.$http.post('/mobile/userRemarks/deleteUserRemark', {userId: this.userId, reamrkId: remarkId}).then(function (res) {
                res = res.body;
                if(res.code === 0){
                    console.log(res.message);
                    getUserRemarks();
                }else{
                    console.log('错误码: ' + res.code + ' : ' + res.message);
                }
            }, function (err) {
                console.log(err);
            });
            console.log('deleteRemark 删除备注');
        },
        addRemark(){
            this.modalShow = true;
            this.isReset = false;
            console.log('addRemark 添加备注');
        },
        modalCancel(){
            this.modalShow = false;
            this.modalInput = '';
            this.isReset = false;
            this.which = -1;
            console.log('modalCancel 取消');
        },
        setRemark(){
            this.modalShow = false;
            if(this.isReset){
                this.$http.post('/mobile/userRemarks/updateUserRemark', {userId: this.userId, remarkId: this.remarkId, remark: this.modalInput}).then(function (res) {
                    res = res.body;
                    if(res.code === 0){
                        this.getUserRemarks();
                        console.log('resetRemark 修改备注');
                    }else{
                        console.warn('错误码 ' + res.code + ' : ' + res.message);
                    }
                }, function (err) {
                    console.log(err);
                });
            }else{
                this.$http.post('/mobile/userRemarks/insertUserRemark', {userId: this.userId, remark: this.modalInput}).then(function (res) {
                    res = res.body;
                    if(res.code === 0){
                        this.getUserRemarks();
                        console.log('setRemark 确定添加');
                    }else{
                        console.warn('错误码 ' + res.code + ' : ' + res.message);
                    }
                }, function (err) {
                    console.log(err);
                });
            }
            console.log(this.modalInput);
            this.modalInput = '';
            this.which = -1;
            this.getUserRemarks();
        },
        resetRemark(){
            this.modalShow = true;
            this.isReset = true;
            this.modalInput = this.remarkList[this.which - 1].remark;
            console.log('resetRemark 修改备注111');
        }
    }
}
</script>
<style lang="scss" scoped>
    @import "../../assets/css/common.scss";
    .remark-title{
        height:rem(40);
        line-height:rem(16);
        font-size: rem(14);
        color: #666;
        padding: rem(12);
    }
    .remark-list{
        background-color: #fff;
    }
    .remark-item{
        background-color: #fff;
        height: rem(70);
        .remark-index{
            padding: rem(9);
            width: rem(34);
            span{
                font-size: rem(16);
                line-height: rem(24);
            }
        }
        .remark-item-body{
            height: rem(50);
            line-height: rem(25);
            font-size: rem(14);
            margin: rem(9) rem(14) rem(9) rem(34);
            .remark-delete{
                position: absolute;
                width: rem(82);
                height: rem(70);
                padding: rem(25) 0;
                background-color: #fe3824;
                color: #fff;
                top: rem(-10);
                right: rem(-96);
                font-size: rem(18);
            }
        }
        .remark-item-line{
            height: 0;
            margin-left: rem(12);
        }
    }
    .add-remark{
        padding: rem(14);
        height: rem(45);
        line-height: rem(16);
        font-size: rem(14);
        background-color: #fff;
        .icon{
            display: inline-block;
            width: rem(20);
            height: rem(16);
            img{
                position: relative;
                top: rem(-2);
            }
        }
    }
    .modal{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 10;
    }
    .modal-panel{
        position: fixed;
        left: 0;
        right: 0;
        margin: auto;
        top: rem(131);
        width: rem(335);
        height: rem(308);
        border-radius: rem(5);
        background-color: #e8e8e8;
        z-index: 20;
        .modal-header{
            text-align: center;
            height: rem(58);
            line-height: rem(20);
            font-weight: normal;
            font-size: rem(20);
            color: #332b29;
            padding: rem(19);
        }
        .modal-body{
            height: rem(204);
            .modal-textarea{
                width: 100%;
                height: rem(204);
                font-size: rem(16);
                background-color: #fff;
                margin: 0;
                border: 0;
                padding: rem(12);
                line-height: rem(26);
                color: #ddd0cc;
            }
            .word-limit{
                position: absolute;
                right: rem(8);
                bottom: rem(50);
            }
        }
        .modal-footer{
            display: flex;
            text-align: center;
            .modal-btn{
                display: inline-block;
                background-color: #e8e8e8;
                color: #0076ff;
                width: rem(167);
                flex: 1;
                height: rem(44);
                line-height: rem(44);
                font-size: rem(17);
                border-color: #ddd;
            }
            .modal-cancle{
                border-radius: 0 0 0 rem(5);
            }
            .modal-ok{
                border-radius: 0 0 rem(5) 0;
            }
        }

    }
</style>
